A Practical Tutorial for the 3D Web Folks… Welcome back to the second-to-last edition of "From Another Perspective." Before diving into this month's subject — how to integrate your 3D into the world wide web — I want to take a moment to say goodbye. The demands of running a business have risen to the point of no compromise, and in order to keep my growing client base happy, some tough decisions have to be made. In the 5 short months I've written this column, my readers have been great. Your questions and comments have been highly valued. I'll miss you guys and wanted to publicly say so. Please feel free to continue emailing me your questions as your 3D endeavors continue, and I'll do my best to see that you get answers.   On To the Tutorial… In this tutorial we're going to build a functioning button and get it onto the web. This is a two-part tutorial because of the size, complexity (it's not that complex but we have to keep things moving along here…) and images involved. We'll do the 3D portion this month, and next month, the final edition of From Another Perspective, we'll take our renderings, slice em' up in Photoshop and load them into our web authoring program. There's a lot of material so hang onto your hats. There are 4 applications we'll use: Adobe Illustrator 6, Strata Studio Pro 2.5.3, Adobe Photoshop 4.0, and GoLive! Cyber Studio 3.1.1 (in that order).     Into Illustrator… This button was first drawn in Illustrator as good ol' vector art. The idea is to first create the templates of the buttons, then bring them into Studio Pro, extrude, bevel, then surface and render them. Using Illustrators' Offset Path feature (Filter/Object/Offset Path), you can create the button's main shape, then quickly and easily create a "collar" that matches the button's shape exactly. Once you've created the main button shape and the surrounding collar shape, save it as an EPS file. Next, working with the button's outline in Illustrator, cut that button in half (you'll notice that the button above is split into two halves- a green for the mouse-over portion, and blue as the dormant portion). Use a guideline in Illustrator and make sure the snap feature is set in the preferences). I like to create one final Illustrator EPS file that has every shape in it. In this case, the button's chrome collar, one whole button (both halves before it was cut in two), and each half of the button. Make sure you omit the guidelines before saving the final EPS file or Strata will import the guidelines with the templates and throw everything off (hey, it's just doing what it's told ;-).     Into Studio Pro… Once in Studio Pro, Import your EPS file (File/Import). You'll notice that it comes in as one "group," containing the various pieces (templates). There are a few ways to tackle this, but here's what I do: first of all, extrude the group as a whole using the extrude tool shown below.   This extrudes everything to an equal depth. Next, once you've extruded the group, ungroup the pieces by clicking on the Ungroup button in your top tool bar,   but leave them all selected (don't click in the main window of Studio Pro after you've ungrouped them). Ungrouping your now extruded templates gives you control over the bevel features in the Object Properties palette.   *Note:By setting your bevel with everything selected, you're setting the same bevel to all the shapes - but the objects have to be ungrouped to do this. Notice the measurements in the Object Property shot above and duplicate the numbers. If you want to assign a different bevel to each shape, you would of course work with them one at a time. *Note: When you bevel an extruded shape in Studio Pro like this, you are adding dimensions outside your original template that lined up perfectly in Illustrator. Beginning to see a problem here? You want a thin bevel so the overlap is kept to a minimum, then you'll need to gently massage the pieces into place after the bevel has been determined. You'll see what I mean as you try it yourself. Remember Studio Pro has a great Alignment tool (Modeling/Align) for such maneuvers. Now that you have everything beveled, it's time to work with each piece independently. Start with the left button half shape (deselect all shapes by clicking in your main working window, then click on the left button). *Note: to avoid risking moving a piece in the main working window, I usually use that humongous Project Window to select and deselect things. Here's hoping Strata enables a feature the Manuals say already works (but doesn't): a pop-up list in the upper right-hand corner of the project window that allows you to close down various portions of that rather large space, streamlining your production space. Your button's not named yet, so you might want to name it in the Object Properties palette. Now switch your view to allow for accuracy and use the scale tool to re-size the depth of the button.     Extend the left button out beyond the collar's front. Note the measurements in the Object Properties/Transform tab, then apply the same to the right button. This gets the button sticking out beyond the chrome collar, as a real button would. Once you have the left and right buttons protruding from the collar appropriately, save your file. *Note: Whenever your are aligning anything in 3D, it's imperative you disable the perspective feature in the camera. Perspective factors in distance and angle when seeing one object in relation to another. What looks aligned from one angle may actually not be aligned at all. Duplicate each half of your button (the whole button shape we imported as part of the original group will be used for nothing more then alignment, so take the time now to use one of Studio Pro's nice features, Selection/Make Construction. You now have two left buttons and two right buttons, and a chrome collar. *Note: This Make Construction feature allows the button to be viewed while working, but when rendering it's invisible to the rendering engine.   Texturing or Surfacing Your Models… Now it's time to Surface your models. The chrome collar can be surfaced using Studio Pro's default Chrome shader (in your resources palette, go to Metal/Chrome-Soft). If you want to get fancy and apply a different reflection map, go ahead. To surface the buttons, duplicate this resource (in the Resources palette New/Surface Texture/Copy from Surface Texture 1), then change the color to a pleasing blue. Leave all other settings as they stand. Now repeat this process to create a green surface. Make one left and one right button green, and make the other left and right button blue.   Rendering… Select Front from your view selector, and turn perspective off, the position as shown below.   In your project window, make the two green buttons invisible (click on the little eye to the right of the object's name).   With the two buttons and the collar selected, hit Command - Minus sign(-). *Note: This centers whatever you have selected in your window, Command- Equal sign (=) centers your entire scene in the working window. Select Ray Tracing-Best from the rendering options and click the camera in the window (make sure you have the "Render Alpha Channel" box checked in your Render settings). The size of the image matters not because we'll re-size it all in Photoshop. Just make it something reasonable and fast, like 326 x 652 pixels. *Note, you're not assigning a camera and rendering your button through an additional camera in Studio Pro. You're simply clicking the camera in your working window and creating the rendering that way. This allows you to completely disable perspective easily and quickly, and saves a few steps. Render these three components, all with Alpha Channels, and without re-sizing your working window AT ALL (very important!!!-see note below): a. The Chrome collar with the blue buttons visible b. The set of blue buttons only (with no chrome collar) c. The set of green buttons only (with no chrome collar) *Note: If you resize your working window, when you go to composite everything in Photoshop, your sizes, aspect ratios and positions will have all changed. The goal is to have everything rendered from exactly the same camera position and perspective. This ensures it all lines up when compositing begins. Save each file as a PICT with the alpha and you're ready to bring them into Photoshop! Unfortunately you'll have to wait until next month to learn what to do next, but I promise it will be worth it. Meanwhile, to get a view of how these buttons work, you can see them in action at: http://www.mhtx.com/ . Make sure you're using at least Netscape Navigator 4.0 or higher so the Dynamic HTML feature is surely implemented. Using these steps and seeing the final product in action, hopefully your mind will start to think of all kinds of things like this to do for your web projects.   John B. Crane jbcrane@applewizards.net     http://applewizards.net/